<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*#progress{
			width: 500px;
			height: 30px;
			margin: 40px auto;
		}*/
		h1{
			text-align: center;

		}
		#kuang{
			width: 600px;
			height: 200px;
			line-height: 200px;
			background: red;
			color: white;
			text-align: center;
			margin: 0 auto;
			font-size: 60px;
		}
		input{
			padding: 15px 30px;
			font-size: 24px;
			background: yellow;
			font-weight: bold;
		}
		#huojiangTel{
			background: red;
			color: white;
			width: auto;
			height: auto;
			font-size: 24px;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		#choujiang{
			width: 460px;
			margin: 0 auto;
			text-align: center;
		}
		.mingdan{
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="progress">
		<h1>手机抽奖</h1>
		<div id="kuang"></div>
		<div id="choujiang">
			<input type="button" class="start" value="三等奖" onclick="start(3)">
			<input type="button" class="start" value="二等奖" onclick="start(2)">
			<input type="button" class="start" value="一等奖" onclick="start(1)">
			<input type="button" class="end" value="结束" onclick="end()">
		</div>
		<input type="button" class="mingdan" value="获奖名单" onclick="mingdan()">
		<div id="huojiangTel"></div>
	</div>
	
	 <script>
	var arr=[];//储存手机号
	var timeid;//计时器ID
	var rnd;//记录随机数
	var Rnd=[];//记录随机数
	var Arr=[];//记录获奖手机号
	var firstArr=[];	//一等奖手机号
	var secondArr=[];	//二等奖手机号
	var thirdArr=[];	//三等奖手机号
	var n;//奖项等级
	var door='close';//抽奖开关设置
	for (var i = 0; i < 40; i++) {
		var str='';
		for (var j = 0; j < 9; j++) {
			str+=Math.floor(Math.random()*10);
		};
		arr[i]='13'+str;
	};
	function choujiang(){
		console.log(n);
		var str='';
		Rnd.splice(0,Rnd.length);
		if(n==3){
			str='&nbsp;&nbsp;&nbsp;';
			while(Rnd.length!=10) {
				rnd=Math.floor(Math.random()*arr.length);
				if (Rnd.indexOf(rnd)==-1) {
					Rnd.push(rnd);
				};
			};
			for (var i = 0; i < 10; i++) {
				if ((i>1)&&(i%2==0)) {str+='<br>&nbsp;&nbsp;&nbsp;'};
				str+=arr[Rnd[i]].slice(0,3)+'****'+arr[Rnd[i]].slice(7)+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
				// console.log(Rnd[i]);
			};
			document.getElementById("kuang").style.fontSize='24px';
			document.getElementById("kuang").style.lineHeight='40px';
			document.getElementById("kuang").innerHTML=str;
		}
		if(n==2){
			str='';
			while(Rnd.length!=3) {
				rnd=Math.floor(Math.random()*arr.length);
				if (Rnd.indexOf(rnd)==-1) {
					Rnd.push(rnd);
				};
			};
			for (var i = 0; i < 3; i++) {
				// if ((i>1)&&(i%2==0)) {str+='<br>&nbsp;&nbsp;&nbsp;'};
				str+=arr[Rnd[i]].slice(0,3)+'****'+arr[Rnd[i]].slice(7)+"<br>";
				// console.log(Rnd[i]);
			};
			document.getElementById("kuang").style.fontSize='42px';
			document.getElementById("kuang").style.lineHeight='67px';
			document.getElementById("kuang").innerHTML=str;
		}
		if(n==1){
			str='';
			while(Rnd.length!=1) {
				rnd=Math.floor(Math.random()*arr.length);
				if (Rnd.indexOf(rnd)==-1) {
					Rnd.push(rnd);
				};
			};
			for (var i = 0; i < 1; i++) {
				// if ((i>1)&&(i%2==0)) {str+='<br>&nbsp;&nbsp;&nbsp;'};
				str+=arr[Rnd[i]].slice(0,3)+'****'+arr[Rnd[i]].slice(7)+"<br>";
				// console.log(Rnd[i]);
			};
			document.getElementById("kuang").style.fontSize='60px';
			document.getElementById("kuang").style.lineHeight='200px';
			document.getElementById("kuang").innerHTML=str;
		}
		
		
		
	};
	function start(i){
		if (door=='close') {
			timeid=setInterval(choujiang,100);
			n=i;
			door='open';
		};
		
	}
	function end(){
		if (door=='open') {
			clearInterval(timeid);
			switch(n){
				case 3:
					for (var i = 0; i < Rnd.length; i++) {
						thirdArr.push(arr.slice(Rnd[i],Rnd[i]+1));
						arr.splice(Rnd[i],1,' ');
					};
					break;
				case 2:
					for (var i = 0; i < Rnd.length; i++) {
						secondArr.push(arr.slice(Rnd[i],Rnd[i]+1));
						arr.splice(Rnd[i],1,' ');
					};
					break;
				case 1:
					for (var i = 0; i < Rnd.length; i++) {
						firstArr.push(arr.slice(Rnd[i],Rnd[i]+1));
						arr.splice(Rnd[i],1,' ');
					};
					break;
				default:
					break;
			}
			

			console.log(Arr);

			arr=arr.filter(function(item,index,arr){
				return item!=' ';
			});
			
			door='close';
		};
		
	}
	function mingdan(){
		var str='';
		if (firstArr.length) {
			str='一等奖：';
			for (var i = 0; i < firstArr.length; i++) {
				str+=firstArr[i]+'&nbsp;&nbsp;&nbsp;'
				if ((i+1)%7==0) {
					str+='<br>';
				};
			};
			str+='<br>';
		};

		if (secondArr.length) {
			str+='二等奖：';
			for (var i = 0; i < secondArr.length; i++) {
				str+=secondArr[i]+'&nbsp;&nbsp;&nbsp;'
				if ((i+1)%7==0) {
					str+='<br>';
				};
			};
			str+='<br>';
		};

		if (thirdArr.length) {
			str+='三等奖：';
			for (var i = 0; i < thirdArr.length; i++) {
				str+=thirdArr[i]+'&nbsp;&nbsp;&nbsp;'
				if ((i+1)%7==0) {
					str+='<br>';
				};
			};
			str+='<br>';
		};
		
		document.getElementById("huojiangTel").innerHTML=str;
	};
	
	// console.log(timeid);
	</script>
</body>
</html>